<template>
  <section class="latest-music">
    <!-- 导航栏 -->
    <section class="tab-bar">
      <span class="item" :class="{active:tag==0}" @click="tag='0'">全部</span>
      <span class="item" :class="{active:tag==7}" @click="tag='7'">华语</span>
      <span class="item" :class="{active:tag==96}" @click="tag='96'">欧美</span>
      <span class="item" :class="{active:tag==8}" @click="tag='8'">日本</span>
      <span class="item" :class="{active:tag==16}" @click="tag='16'">韩国</span>
    </section>
    <!-- 最新音乐内容 -->
    <table>
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in songs" :key="index" @dblclick="playMusic(item.id)">
          <td v-text="index+1"></td>
          <td>
            <img :src="item.album.picUrl" alt class="td-img" style="cursor:pointer;" />
          </td>
          <td v-text="item.name"></td>
          <td v-text="item.album.artists[0].name"></td>
          <td v-text="item.album.name"></td>
          <td v-text="item.duration"></td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
import axios from "axios";
import { formattingTime } from "@/api/commend";
export default {
  name: "latest",
  data() {
    return {
      tag: "0",
      songs: [],
    };
  },
  created() {
    this.getLatest();
  },
  watch: {
    tag() {
      this.getLatest();
    },
  },
  methods: {
    getLatest() {
      //   最新音乐接口地址：https://autumnfish.cn/top/song
      axios({
        method: "get",
        url: "https://autumnfish.cn/top/song",
        params: {
          id: this.tag,
        },
      }).then((res) => {
        // 获取数据并处理音乐的时长
        this.songs = formattingTime(res.data.data);
      });
    },
    // 播放音乐
    playMusic(id) {
      axios({
        method: "get",
        url: "https://autumnfish.cn/song/url",
        params: {
          id: id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        this.$parent.$parent.$parent.$parent.$parent.url = url;
      });
    },
  },
};
</script>

<style lang="scss">
</style>